<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>	css 控制 三角形 系列  </title>
<!--
	作者：1091140360@qq.com
	时间：2017-05-07
	描述： 原理是：  通过控制边的宽度来设置箭头朝那个方向， 那个边的 宽度就是  0；  反向的 宽度 就是 要设置的 三角形的 大小尺寸   两边的 尺寸是辅助  可以设置成白色也可以是透明的 transparent 
-->
<style>
*{
	margin:0;
	padding:0;
}
li{
	margin:20px;
	float: left;
}
.main{
	width:1200px;
	margin:10px auto;
	overflow: hidden;
	border: 1px dashed red;
}

.div1{
	width: 0;
	height: 0;
	
	border-top: 30px solid #000;
	border-bottom: 30px solid #000;
	
	border-right: 30px solid red;
	border-left: 30px solid red;
}

.div2{
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-left: 40px solid #ff0000;
	border-bottom: 40px solid transparent;
}
.div3{
	width: 0;
	height: 0;
	border-top: 40px solid transparent;
	border-right: 40px solid #ff0000;
	border-bottom: 40px solid transparent;
}
.div4{
	width: 0;
	height: 0;
	border-top: 40px solid blue;
	border-left: 280px solid yellow;
	border-bottom: 40px solid #ff0000;
}
.div5{
	width: 0;
	height: 0;
	border-top: 40px solid #ff0000;
	border-left: 40px solid yellow;
	border-bottom: 200px solid orange;
}
.div6{
	width:0;
	height:0;
	border-left:50px solid blue;
	border-right:50px solid yellow;
	border-bottom:70px solid red;
}
.div7{
	width:0;
	height:0;
	border-left:50px solid blue;
	border-right:20px solid blue;
	border-bottom:120px solid red;
}
/*箭头*/
/* 使用伪元素方式  形成箭头  */
.pre{
	position: relative;
	width: 0;
	height:0;
	border-top:100px solid red;
	border-right:100px solid blue;
	border-bottom:100px solid red;
	border-left:100px solid blue;
}
.pre:before{
	content: "before";
	position: absolute;
	width: 0;
	height: 0;
	margin: -100px 0 0 -108px;
	font-weight: 900;
	text-indent: -5em;
	color: red;
	border: 100px solid;
	border-color:transparent transparent transparent #fff;  
}
.pre:after{
    content:"after";
    position: absolute;
    top:-100px;
    left: -90px;
    width: 0;
    height:0;
    font-weight: 900;
    text-indent: 3em;
    color: #fff;
    
    border-top: 100px solid transparent;
    border-right: 100px solid orange;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
}

/* 使用定位的方式  形成的 箭头  */
.pre1, .pre2 {
    width: 0;
    height: 0;
    border-width: 40px;
    border-style: dashed solid dashed dashed;
}
.pre1 {
    border-color: transparent red transparent transparent;
}
.pre2 {
    position: relative;
    top: -100px;
    left: 5px;
    border-color: transparent blue transparent transparent;
}

</style>
</head>
<body>
<div class="main">
	<ol>
	    <li class="div1">	</li>	
	    <li class="div2">	</li>	
	    <li class="div3">	</li>	
	    <li class="div4">  </li>	
	    <li class="div5">	</li>	
	    <li class="div6">	</li>
	    <li class="div7">	</li>
	<!--箭头-->
	    <li class="pre"></li>
	    
	    <li class="pre1"></li>
	    <li class="pre2"></li>
    </ol>
</div>

</body>
</html>
